<template>
    <div class="content">
        <el-table
                :data="dataList"
                style="width: 100%;margin-bottom: 20px;"
                row-key="uuid"
                border
                :default-expand-all = 'false'
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                    prop="name"
                    label="学校"
                    sortable
                    width="230">
            </el-table-column>
            <el-table-column
                    prop="deptname"
                    label="专业"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="classesname"
                    label="班级">
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            icon="el-icon-plus"
                            size="mini"
                            @click="handleAdd(scope.$index, scope.row)">增加
                    </el-button>

                    <el-button
                            icon="el-icon-edit"
                            size="mini"
                            @click="handleUpdate(scope.$index, scope.row)">修改
                    </el-button>

                    <el-button
                            icon="el-icon-delete"
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>

            <!-- ------------新加入---------- -->


            <!-- 添加或修改学生管理对话框 -->
            <el-dialog :title="title"  :visible.sync="open" width="500px" append-to-body>
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                        <el-form-item label="学校" prop="name">
                        <el-input v-model="form.name" placeholder="请输入学校" />
                        </el-form-item>
                        <el-form-item label="专业" prop="deptname">
                        <el-input v-model="form.deptname" placeholder="请输入专业" />
                        </el-form-item>
                        <el-form-item label="班级"  prop="classesname">
                        <el-input  placeholder="请输入班级" v-model="form.classesname"/>
                        </el-form-item>
                    </el-form>
                         <div slot="footer" class="dialog-footer" >
                            <el-button type="primary" @click="submit()">确 定</el-button>
                            <el-button @click="cancel">取 消</el-button>
                        </div> 
            </el-dialog>

        </el-table>


        <!-- ------------新加入---------- -->
    </div>
</template>

<script>
    export default {
        name: "School",
        data() {
            return {
                value:null,

                schools : [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 表单参数
                form: {},
                // 表单校验
                rules: {},
            }
        },
        methods: {
            guid2() {
                function S4() {
                    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
                }
                return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
            },

            //-------新加入---------

            /** 新增按钮操作 */
            handleAdd(a,b) {
                console.log(b.children.length)
                // console.log(b)
                if(b.schoolId != null){
                    this.value=b;
                    this.reset();
                    this.title = "添加学校信息";
                    this.open = true;
                }
            },

            /** 提交按钮 */
            submit() {
            
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateStuage(this.form).then(response => {
                        this.$message("修改成功");
                        this.open = false;
                        this.newList();
                        });
                    } else {
                        this.$post("/school",{
                            "name": this.form.name,
                        }).then(response => {
                            this.$message("新增学校成功");
                            this.newList();
                            this.$post("/dept",{
                                "schoolId":this.value.schoolId,
                                "name": this.form.deptname,
                            }).then(response => {
                                const name = this.form.deptname;
                                for(let i=0 ;i<this.value.children.length;i++){
                                    // if(this.value.children.[i].deptname==name){
                                    //     this.$message("新增专业成功");
                                    //     this.newList();
                                    //     this.$post("/class",{
                                    //     "schoolId":this.value.schoolId,
                                    //     "deptId":this.value.children.[i].deptsId,
                                    //     "name": this.form.classesname,
                                    //     }).then(response => {
                                    //         this.$message("新增班级成功");
                                    //         this.newList();
                                    //     });
                                    // }
                                }
                                
                            });
                            this.$message("新增成功");
                            this.open = false;
                            this.newList();
                            });
                    }
                }
            });
            },



            // 取消按钮
            cancel() {
            this.open = false;
            },

            handleDelete(a,b){
                console.log(b);                
                if(b.schoolId != null){
                    this.$del("/school/"+b.schoolId)
                    .then((res) => {
                        this.$notifyMsg("成功", res.data.msg, "success")
                        this.newList()
                    })
                }else if(b.deptsId != null){
                     this.$del("/dept/"+b.deptsId)
                        .then((res) => {
                            this.$notifyMsg("成功", res.data.msg, "success")
                            this.newList()
                        })
                }else{
                    this.$del("/class/"+b.classesId)
                        .then((res) => {
                            this.$notifyMsg("成功", res.data.msg, "success")
                            this.newList()
                        })
                }
            },


            /** 修改按钮操作 */
            handleUpdate(a,b) {
                // console.log(b);
                this.$get("/school/"+b.schoolId).then((res) => {
                    this.form = res.data.school;
                    this.open = true;
                    this.title = "修改学校管理";
                });
            },

            newList(){
                this.$get('/school')
                .then(res => {
                    // console.log(res.data)
                    // console.log(this.schools)
                    this.schools = res.data.school
                })
            },

            // 表单重置
            reset() {
            this.form = {
                id: null,
                name: null,
                age: null
            };
            // this.resetForm("form");
            },
            //-------新加入---------
        },

        created() {
            this.newList();
        },

        computed:{
            dataList(){
                return this.schools.map(item => {
                    let depts = [];
                    for (let i = 0;i<item['depts'].length;i++){
                        // console.log(item['depts'][i]['classes'])
                        depts.push(
                            {
                                deptsId : item['depts'][i].id,
                                deptname : item['depts'][i].name,
                                uuid : this.guid2()
                            }
                        )
                        // console.log(depts)
                        let children = [];
                        for (let j = 0;j<item['depts'][i]['classes'].length;j++){
                            children.push(
                                {
                                    classesId : item['depts'][i]['classes'][j].id,
                                    classesname:item['depts'][i]['classes'][j].name,
                                    uuid : this.guid2()
                                }
                            )
                        }
                        depts[i].children = children
                    }
                    return{
                            schoolId : item.id,
                            name : item.name,
                            children : depts,
                            uuid : this.guid2()
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .content {
        padding: 0 1%;
    }
</style>